<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Order</title>


<SCRIPT src="js/jquery.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="js/moment.js" type="text/javascript"></SCRIPT>
<SCRIPT src="js/bootstrap-datetimepicker.js" type="text/javascript"></SCRIPT>
<SCRIPT src="js/bootstrap-datetimepicker.ru.js" type="text/javascript"></SCRIPT>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script src="js/bootstrap3-typeahead.js"></script>
<script type='text/javascript' src="js/knockout-3.1.0.js"></script>


<!-- my style -->
<link href="css/dopstyle.css" rel="stylesheet">
</head>
<body class="bg">
	<%@page import="java.util.ArrayList"%>


	
	
<%
String childCl = "";

entities.Client client = (entities.Client) request.getAttribute("client");
childCl =  childCl + "{ name: '" + client.getFirstname()+" "+client.getSecondname() + "', id: "+client.getId()+"},";

ArrayList<entities.Client> childClients = (ArrayList<entities.Client>) request.getAttribute("childClients");
for (int i=0; i<childClients.size(); i++){
	childCl = childCl + "{ name: '" + childClients.get(i).getFirstname()+" "+childClients.get(i).getSecondname() + "', id: "+childClients.get(i).getId()+"},";	
}
if (childCl.length() != 0) childCl = childCl.substring(0, childCl.length()-1);

%>

<div class="header"></div>

<div class="container">
	<form class="form" method="Get"	action="/NCProjectWeb/prepareOrder" role="form">
		<div class="jumbotron">
		
		<div class="row">
			<div class="col-md-8 col-centered">
					<h2>Кто летит?</h2>
					<select class="form-control" data-bind="options: persons,
						   optionsText: 'name',
						   selectedOptions: selectedPerson" multiple="true"
						   required></select>
					<p class="text-muted">*Подсказка: Используйте ctrl для выбора нескольких человек</p>	
					<h2>Тип билетов:</h2>
					<select class="form-control" name="type"><option>Эконом класс</option><option>Бизнес класс</option><option>Первый класс</option></select>
			</div>
		</div></br>
		
		<div class="row">
			<div  class="col-md-1 col-centered" >
				<button type="submit " class="btn btn-primary">Далее</button>
				
		
			</div>
			<br>
				
			<a href="/NCProjectWeb/RegistrationChildClient.jsp?id=<%= request.getParameter("id") %> ">Добавить пользователя к вашей учетной записи</a>
		</div>		
		
	</div> <!-- end of jumbotron -->
	
	<div data-bind="foreach: selectedPerson"> 
		<!-- Appears when you select something -->
	   <input  type="hidden"  name="id_client" data-bind="value: id"></input>
	</div>
	<input  type="hidden"  name="id_flight" value="<%= request.getParameter("id") %>"></input>
	</form>
	


</div>

	

 

<script type="text/javascript">
 
var viewModel = {
        persons : ko.observableArray([<%=childCl%>]),
           
            
        selectedPerson : ko.observableArray(),
            
            makeRequest: function() {
            var dto = {persons: []};
          
       ko.utils.arrayForEach(this.selectedPerson(), function (person) {
                dto.persons.push(person.id);
                });
           //Insert something to dto
           // Make request

            console.log(dto);
       }
    };

    ko.applyBindings(viewModel);
 
</script>
</body> 
</html>
</body>
</html>